<template>
  <div>
    <div class="map" ref="map"></div>
  </div>
</template>

<script>
import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { GaodeMap } from '@antv/l7-maps';

export default {
    props:{
        ProvinceData: {
            type: Array,
            default: null
        }
    },

    data(){
        return{
            el: null,
            scene: null,
            layer: null,
            a: 3
            }
    },

    created(){
        this.initMap()
    },

    methods:{
        initMap(){
            this.$nextTick(() => {
                this.el = this.$refs.map
                this.scene = new Scene({
                logoVisible: false,
                id: this.el,
                map: new GaodeMap({
                    center: [ 100, 37.5 ],
                    pitch: 0,
                    style: 'light',
                    zoom: 3,
                    minZoom: 0,
                    maxZoom: 10
                })
                });

                this.scene.on('loaded', () => {
                    this.layer = new CountryLayer(this.scene, {
                        data: this.ProvinceData,
                        joinBy: [ 'NAME_CHN', 'childStatistic' ],
                        depth: 1,
                        provinceStroke: '#fff',
                        cityStroke: '#EBCCB4',
                        cityStrokeWidth: 1,
                        fill: {
                            color: {
                                field: 'totalConfirmed',
                                values:  (totalConfirmed) => { // 颜色的回调函数
                                    return  totalConfirmed > 4800 ? "#FF4818" :
                                            totalConfirmed > 2400 ? "#fc5a31" :
                                            totalConfirmed > 1280 ? "#fa6641" :
                                            totalConfirmed > 640 ? "#fa6641" :
                                            totalConfirmed > 320 ? " #fd8e72" :
                                            totalConfirmed > 160 ? " #ff947a" :
                                            totalConfirmed > 80 ? "#ffa088" :
                                            totalConfirmed > 40 ? " #f5ad9b" :
                                            totalConfirmed > 20 ? "#f3b9aa" :
                                            totalConfirmed > 10 ? "#fcd2c8" : "#f7ded7"
                                            }
                            }
                        },
                        popup: {
                        enable: true,
                        Html: props => {
                            return `<p>${props.NAME_CHN}</p>
                              <p><span>总确诊人数:</span><span>${props.totalConfirmed}</span></p>
                              <p><span>总治愈人数:</span><span>${props.totalCured}</span></p>
                              <p><span>总死亡人数:</span><span>${props.totalDeath}</span></p>
                              `;
                        }
                        }
                    });
                    });
            })
        }
    }
}
</script>

<style scoped>
.map{
    margin-top: 10px;
    height: 500px;
    width: 100%;
    position: relative;
  }
</style>